<template>
     <div>
         <ul class="list">
            <li class="item" v-for="item in letters" :key="item"  :ref="item"           
              @touchstart="handleTouchStart"
              @touchmove="handleTouchMove"
              @touchend="handleTouchEnd"
              @click="handleLetterClick" 
      >{{item}} </li>
         </ul>
     </div>
</template>

<script>
export default {
    name:'CityAlphabet',
    data(){
      return{
         touchStatus:false,
         startY:0,
         timer:''
      }
    },
    computed:{
       letters () {
      const letters = []
      for( let i in this.cities) {
        letters.push(i)
      }
      return letters
       }
    },
    updated (){
     this.startY = this.$refs['A'][0].offsetTop
    },
    props:{
      cities:Object
    },
    methods:{
      handleLetterClick(e){
        this.$emit('change',e.target.innerText)
      },
      handleTouchStart () {
      this.touchStatus = true
    },
    /*函数节流 */
    handleTouchMove () {
      if(this.touchStatus){
         if(this.timer) {
          clearTimeout(this.timer)
        }
      this.timer = setTimeout(()=> {
        const touchY = e.touches[0].clientY -79
        const index = Math.floor((touchY-startY) / 20)
        if(index >= 0 && index < this.letters.length) {
          this.$emit('change',this.letters[index])
        }
      },16)
      
     }
    },
    handleTouchEnd () {
      this.touchStatus = false
      }
    }
}
</script>

<style scoped>
  .list{
    display:flex;
    flex-direction:column;
    justify-content:center;
    position:absolute;
    top:80px;
    right:5px;
    bottom:0;
    width:15px;
  }
   
    .item{
      line-height:18px;
      text-align:center;
      color:#11C0D6;
      font-size: 14px;
    }
      


</style>
